<template>
	<view class="center">
		<view class="navbar">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<view class="navbarh acea-row row-bottom">
				<view class="acea-row row-between row-middle" style="width: 100%;">
					<view class="iconfont icon-jiantou-zuo2" @click.stop="back"></view>
					<view class="title">南宁住房公积金管理中心</view>
					<view style="width: 84rpx;height: 50rpx;"></view>
				</view>
			</view>
		</view>
		
		<view style="padding: 0 40rpx;z-index: 999;position: relative;">
			<view class="acea-row row-center">
				<image class="logo" src="https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231205/7acc11a85850d9f93ae4a6668ca5c0f7.png" mode="aspectFit"></image>
			</view>
			<view class="acea-row row-middle shuru">
				<image class="icon" src="https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231205/b51e8e63c13e7bdf9a42e8f19ee127ac.png" mode="aspectFit"></image>
				<input type="text" placeholder="请输入姓名" placeholder-style="color:999;font-size:26rpx;"/>
			</view>
			<view class="acea-row row-middle shuru">
				<image class="icon" src="https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231205/fc442473a6bbd18c409004ad6961f808.png" mode="aspectFit"></image>
				<input type="text" placeholder="请输入证件号码" placeholder-style="color:999;font-size:26rpx;"/>
			</view>
			<view class="acea-row row-right row-middle" style="color: #888888;font-size: 28rpx;">
				<view>立即注册</view>
				<view class="xian"></view>
				<view>忘记密码？</view>
			</view>
			<view class="shuanlian">刷脸登录</view>
			<view class="pwd">密码登录</view>
			<view class="text-center red">请勿将身份证号码、密码或短信验证码等信息提交第三方，以免造成信息安全泄露</view>
			<view class="text-center black">
				<text>若登录页面出现异常或操作过程中遇到系统报错，</text>
				<text class="bule">请联系我们</text>
			</view>
			<view class="text-center greay">版权所有：南宁住房公积金管理中心</view>
		</view>
		
		<view class="bottom"></view>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				
			};
		},
		methods:{
			
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	page{ 
		background-color: #E6EEF6 !important;
	}
	.center{
		
		.navbar{
			width: 100%;
			height: 180rpx;
			background-image: url('https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/navbar-bg.png');
			background-size: 100% 100%;
			
			.navbarh{
				width: 100%;
				height: 88rpx;
				padding: 0 10rpx 10rpx 10rpx;
				
				.icon-jiantou-zuo2{
					color: #fff;
					font-size: 40rpx;
				}
				.title{
					font-size: 32rpx;
					color: #fff;
					margin-left: 20rpx;
				}
			}
		}
		
		.logo{
			width: 379rpx;
			height: 321rpx;
		}
		
		.bottom{
			width: 100vw;
			height: 546rpx;
			background-image: url('https://33ce93dc34c11522.rongyide.vip/uploads/attach/2023/12/20231205/ac31f2b6676045117d4ff5018a41ed2a.png');
			background-size: 100% 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
		}
		
		.shuru{
			width: 670rpx;
			height: 80rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
			padding: 10rpx 20rpx;
			margin-bottom: 30rpx;
			
			input{
				width: 500rpx;
			}
			.icon{
				width: 35rpx;
				height: 35rpx;
				margin-right: 20rpx;
			}
		}
		
		.xian{
			width: 3rpx;
			height: 28rpx;
			background-color: #999999;
			margin: 0 10rpx;
		}
		.shuanlian{
			width: 100%;
			line-height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			background-color: #AFB8BD;
			color: #ffffff;
			margin-top: 80rpx;
			font-size: 28rpx;
		}
		.pwd{
			width: 100%;
			line-height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			border: 1rpx solid #00A6F7;
			font-size: 28rpx;
			color: #00A6F7;
			margin-top: 40rpx;
		}
		.red{
			color: #F44336;
			font-size: 25rpx;
			margin-top: 40rpx;
		}
		.black{
			color: #010101;
			font-size: 25rpx;
			margin-top: 20rpx;
		}
		.bule{
			color: #00A6F7;
		}
		.greay{
			color: #999999;
			font-size: 25rpx;
			margin-top: 20rpx;
		}

		
		
		
		
	}
</style>
